<div class="bjui-pageContent">
    <div class="bjui-doc">
        <h3 class="page-header">datagrid参数及方法</h3>
        <blockquote>
            <p>本节介绍datagrid组件的参数及方法。</p>
        </blockquote>
        <h4>参数（options）</h4>
        <blockquote>
            <p>DOM方式初始化datagrid的，推荐使用集合属性<code>data-options</code>定义参数，如果使用<code>data属性</code>定义参数，注意转换成对应的名称，参见<a href="doc/base/data.html" data-toggle="navtab" data-id="doc-base">data属性</a>一节。</p>
        </blockquote>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>默认值</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>gridTitle</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 标题。</td>
                </tr>
                <tr>
                    <td>columns</td>
                    <td>array</td>
                    <td>null</td>
                    <td>[可选] 表头模型，适用动态生成表头，如果未设置本参数，将自动转化静态表头为模型。<a href="doc/datagrid/datagrid-columns.html" data-toggle="navtab" data-options="{id:'doc-datagrid-columns', title:'columns参数'}">点此查看columns对象的详细参数</a></td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>array</td>
                    <td>null</td>
                    <td>[可选] 提供datagrid需要的数据，如果同时设置有<code>dataUrl</code>参数，本参数优先级高。</td>
                </tr>
                <tr>
                    <td>dataUrl</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] Ajax请求数据的URL。返回数据模板:
                    <br><b>JSON:</b><code>{total:50, pageCurrent:1, list:[{name:'孙悟空',sex:true}, {name:'美国队长', true}]}</code>
                    <br><b>Array:</b><code>{total:50, pageCurrent:1, list:[['孙悟空',true], ['美国队长', true]]}</code>    
                    </td>
                </tr>
                <tr>
                    <td>loadType</td>
                    <td>string</td>
                    <td>POST</td>
                    <td>[可选] Ajax请求方式。</td>
                </tr>
                <tr>
                    <td>dataType</td>
                    <td>string</td>
                    <td>json</td>
                    <td>[可选] 数据类型，可选参数['json' | 'array' | 'xml']。</td>
                </tr>
                <tr>
                    <td>hiddenFields</td>
                    <td>array</td>
                    <td>null</td>
                    <td>[可选] <code>仅用于dataType='array'时</code>隐藏字段，可以将不能加载到页面上的值设置到给定的字段，array数据除去表头的列后依次赋值。</td>
                </tr>
                <tr>
                    <td>local</td>
                    <td>string</td>
                    <td>remote</td>
                    <td>[可选] 处理数据方式，可选参数['local' | 'remote']，(影响（分页、排序、筛选）)。</td>
                </tr>
                <tr>
                    <td>fieldSortable</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 点击页头字段快速排序。<code>普通表格转为datagrid的，需设置dataUrl参数，local = 'remote'</code></td>
                </tr>
                <tr>
                    <td>filterThead</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 允许表格头部快速筛选。<code>普通表格转为datagrid的，需设置dataUrl参数，local = 'remote'</code></td>
                </tr>
                <tr>
                    <td>sortAll</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 排序范围，true = 所有数据排序， false = 当前页数据排序。<code>普通表格转为datagrid的，默认为true</code></td>
                </tr>
                <tr>
                    <td>filterAll</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 筛选范围，true = 从所有数据中筛选，false = 从当前页数据中筛选。<code>普通表格转为datagrid的，默认为true</code></td>
                </tr>
                <tr>
                    <td>filterMult</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 支持多字段筛选。</td>
                </tr>
                <tr>
                    <td>linenumberAll</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 行号范围，true = 为所有数据编号，false = 为当前页数据编号。</td>
                </tr>
                <tr>
                    <td>showLinenumber</td>
                    <td>boolean/string</td>
                    <td>true</td>
                    <td>[可选] 是否显示行号，参数[true | false | 'lock']，lock参数 = 锁定行号列（适用于多列字段，出现横向滚动条的情况）。</td>
                </tr>
                <tr>
                    <td>showCheckboxcol</td>
                    <td>boolean/string</td>
                    <td>false</td>
                    <td>[可选] 是否显示行复选框，参数同上。</td>
                </tr>
                <tr>
                    <td>showEditbtnscol</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 是否显示编辑按钮列。</td>
                </tr>
                <tr>
                    <td>showTfoot</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 是否显示页脚，适用于显示统计信息，需要字段相关参数支持。</td>
                </tr>
                <tr>
                    <td>showToolbar</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 是否显示工具条，需要设置参数<code>toolbarItem</code>或<code>toolbarCustom</code>。</td>
                </tr>
                <tr>
                    <td>toolbarItem</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 显示工具条按钮，可选参数['all, add, edit, cancel, save, del, import, export, |']，“all” = 显示所有按钮，“|” = 按钮组分隔符。</td>
                </tr>
                <tr>
                    <td>toolbarCustom</td>
                    <td>string/object/function</td>
                    <td>null</td>
                    <td>[可选] 自定义的html内容或jQuery DOM对象，支持带返回值函数。</td>
                </tr>
                <tr>
                    <td>columnResize</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 允许调整列宽。</td>
                </tr>
                <tr>
                    <td>columnMenu</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 表头字段列上显示菜单按钮。</td>
                </tr>
                <tr>
                    <td>columnShowhide</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 表头字段列菜单上出现 “显示/隐藏 列” 选项。</td>
                </tr>
                <tr>
                    <td>columnFilter</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 表头字段列菜单上出现 “过滤” 选项。</td>
                </tr>
                <tr>
                    <td>columnLock</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 表头字段列菜单上出现 “锁定列、解除锁定” 选项。</td>
                </tr>
                <tr>
                    <td>paging</td>
                    <td>boolean/object</td>
                    <td>true</td>
                    <td>[可选] 是否显示分页组件，可设置分页参数。分页参数模板：
                        <code>{pageSize:30, selectPageSize:'30,60,90', pageCurrent:1, showPagenum:5, total:0}</code><br>
                        <code>如果local='remote'，并通过dataUrl参数请求json数据时，返回的数据要提供total、pageCurrent参数，可提供pageSize参数</code>
                    </td>
                </tr>
                <tr>
                    <td>pagingAlign</td>
                    <td>string</td>
                    <td>center</td>
                    <td>[可选] 分页组件对齐方式，参数['left' | 'center' | 'right']</td>
                </tr>
                <tr>
                    <td>editUrl</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 保存编辑、添加数据的url，Ajax请求方式为POST，服务器端接收的参数名称为"json"，数据类型是JSON Array。</td>
                </tr>
                <tr>
                    <td>editCallback</td>
                    <td>function(json)</td>
                    <td>null</td>
                    <td>[可选] 保存成功后的回调，返回的json内容可以是B-JUI默认的回调json或保存后的json数据，<code>datagrid默认回调：如果返回保存后的json数据，将会更新对应的数据行</code>。</td>
                </tr>
                <tr>
                    <td>editMode</td>
                    <td>string</td>
                    <td>inline</td>
                    <td>[可选] 编辑、添加数据的方式，参数[false | 'inline' | 'dialog']。false = 不能编辑，inline = 行内编辑，dialog = 弹窗编辑。</td>
                </tr>
                <tr>
                    <td>editDialogOp</td>
                    <td>object</td>
                    <td>null</td>
                    <td>[可选] 弹窗编辑方式时，设置弹出窗口的参数，如<code>{width:500, height:300, mask:false}</code></td>
                </tr>
                <tr>
                    <td>inlineEditMult</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 允许行内编辑模式下同时添加/编辑多行。</td>
                </tr>
                <tr>
                    <td>saveAll</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 适用于多行行内编辑时，一次性保存全部数据，发送到服务器端数据格式见参数<code>editUrl</code>。</td>
                </tr>
                <tr>
                    <td>addLocation</td>
                    <td>string</td>
                    <td>first</td>
                    <td>[可选] 添加新行数据于当前页的位置，参数['first' | 'last' | 'prev' | 'next']，参数prev和next参考当前选中行位置。</td>
                </tr>
                <tr>
                    <td>delUrl</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 删除数据的url，服务器端接收的数据见参数<code>delPK</code></td>
                </tr>
                <tr>
                    <td>delType</td>
                    <td>string</td>
                    <td>POST</td>
                    <td>[可选] Ajax删除数据的请求方式。</td>
                </tr>
                <tr>
                    <td>delPK</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 设置删除主键名，如果设置了主键，则只发送该字段的值(删除多条则主键值以逗号分隔)到服务器端，否则发送JSON数据（参数名"json"，数据类型为JSON Array）。</td>
                </tr>
                <tr>
                    <td>delConfirm</td>
                    <td>boolean/string</td>
                    <td>null</td>
                    <td>[可选] 删除前的确认提示，参数[true | false | '自定义提示信息']，参数为false时不弹出提示信息。</td>
                </tr>
                <tr>
                    <td>delCallback</td>
                    <td>function(json)</td>
                    <td>null</td>
                    <td>[可选] 删除成功后的回调函数，返回的json内容为B-JUI默认的回调json。</td>
                </tr>
                <tr>
                    <td>jsonPrefix</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 发送到服务器端的json数据(name)加前缀，包括(保存、删除、筛选)操作。</td>
                </tr>
                <tr>
                    <td>contextMenuH</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 在表头上右键点击时出现 ”显示/隐藏列“ 的快捷菜单。</td>
                </tr>
                <tr>
                    <td>contextMenuB</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 在数据行右键点击时出现快捷菜单，菜单选项有(刷新、添加、编辑、取消、删除)。</td>
                </tr>
                <tr>
                    <td>hScrollbar</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 允许出现横向滚动条。</td>
                </tr>
                <tr>
                    <td>fullGrid</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>[可选] 使表格铺满网格容器(如果值为true，则需要设置有列宽，并且总宽度小于datagrid容器宽度时有效)。</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>int/percent</td>
                    <td>null</td>
                    <td>[可选] datagrid容器宽度，默认为父容器的宽，相当于'100%'。</td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>int/percent</td>
                    <td>300</td>
                    <td>[可选] datagrid容器高度。</td>
                </tr>
                <tr>
                    <td>importOption</td>
                    <td>object</td>
                    <td>null</td>
                    <td>[可选] 工具栏的导入按钮参数，dialog或navtab方式打开导入页面，参数模板<code>{type:"dialog", options:{url:'', width:400, height:200}}</code></td>
                </tr>
                <tr>
                    <td>exportOption</td>
                    <td>object</td>
                    <td>null</td>
                    <td>[可选] 工具栏的导出按钮参数，执行ajax url或以dialog or navtab方式打开导出页面，参数模板<code>{type:"ajax", options:{url:""}}</code></td>
                </tr>
                <tr>
                    <td>beforeEdit</td>
                    <td>function</td>
                    <td>null</td>
                    <td>[可选] 带返回值方法，编辑数据前调用，返回true继续编辑，返回false取消编辑。</td>
                </tr>
                <tr>
                    <td>beforeDelete</td>
                    <td>function</td>
                    <td>null</td>
                    <td>[可选] 带返回值方法，删除数据前调用，返回true继续删除，返回false取消删除。</td>
                </tr>
                <tr>
                    <td>afterSave</td>
                    <td>function($trs, datas)</td>
                    <td>null</td>
                    <td>[可选] 保存成功后执行方法，参数$trs为保存行(jQuery 对象)，datas为保存行对应数据(JSON Array)。</td>
                </tr>
                <tr>
                    <td>afterDelete</td>
                    <td>function</td>
                    <td>null</td>
                    <td>[可选] 删除成功后执行方法。</td>
                </tr>
            </tbody>
        </table>
        <h4>方法</h4>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>方法名</th>
                    <th>参数类型</th>
                    <th>参数说明</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>showLinenumber(flag)</td>
                    <td>boolean/string</td>
                    <td>true | false， 'lock' | 'unlock'</td>
                    <td>行号列：显示、隐藏、锁定、解除锁定。</td>
                </tr>
                <tr>
                    <td>showCheckboxcol(flag)</td>
                    <td>boolean/string</td>
                    <td>true | false， 'lock' | 'unlock'</td>
                    <td>复选框列：显示、隐藏、锁定、解除锁定。</td>
                </tr>
                <tr>
                    <td>showEditCol(tabids)</td>
                    <td>boolean</td>
                    <td>true | false</td>
                    <td>编辑按钮列：显示、隐藏。</td>
                </tr>
                <tr>
                    <td>showhideColumn(column, showFlag)</td>
                    <td>object/int, boolean</td>
                    <td>column = 列索引或字段列的jQuery对象，showFlag = true/false</td>
                    <td>显示、隐藏某列。</td>
                </tr>
                <tr>
                    <td>selectedRows(rows, [selected])</td>
                    <td>int/string/object, [boolean]</td>
                    <td>单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象，[可选参数，选中|取消选中，默认选中]</td>
                    <td>选中/取消选中行。</td>
                </tr>
                <tr>
                    <td>add(addLocation)</td>
                    <td>string</td>
                    <td>'first' | 'last' | 'prev' | 'next'</td>
                    <td>添加行，参数参考datagrid参数<code>addLocation</code>。</td>
                </tr>
                <tr>
                    <td>doEditRow(row)</td>
                    <td>object/int</td>
                    <td>数据行的jQuery对象或行索引。</td>
                    <td>编辑行。</td>
                </tr>
                <tr>
                    <td>doCancelEditRow(row)</td>
                    <td>object/int</td>
                    <td>数据行的jQuery对象或行索引。</td>
                    <td>取消编辑行。</td>
                </tr>
                <tr>
                    <td>doSaveEditRow(row)</td>
                    <td>object/int</td>
                    <td>数据行的jQuery对象或行索引。</td>
                    <td>保存编辑行。</td>
                </tr>
                <tr>
                    <td>delRows(rows)</td>
                    <td>int/string/object</td>
                    <td>单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象</td>
                    <td>删除行。</td>
                </tr>
                <tr>
                    <td>saveAll()</td>
                    <td>--</td>
                    <td>--</td>
                    <td>保存所有编辑行。</td>
                </tr>
                <tr>
                    <td>refresh()</td>
                    <td>--</td>
                    <td>--</td>
                    <td>刷新，重新加载数据。</td>
                </tr>
                <tr>
                    <td>jumpPage(pageNum, [pageSize])</td>
                    <td>int, int</td>
                    <td>跳转页码(仅设置分页大小参数时，可设为null)，[可选参数，页大小]</td>
                    <td>跳转到指定页码。</td>
                </tr>
                <tr>
                    <td>destroy()</td>
                    <td>--</td>
                    <td>--</td>
                    <td>销毁datagrid。</td>
                </tr>
            </tbody>
        </table>
        <h4>取得选中行</h4>
        <blockquote class="point">$('table - selector').data('selectedTrs')</blockquote>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>